<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>努比亚手机-官方网站</title>
		  <meta name="keywords" content="nubia,努比亚,努比亚手机,努比亚红魔,红魔游戏手机,红魔,Z30Pro,nubiaPlay,红魔6R,红魔6Pro" />
		  <meta name="description" content="努比亚,新锐高端智能手机品牌,以专业摄影,极致游戏体验,无边框等为特色,代表产品有腾讯红魔游戏手机,Z30Pro,红魔6R,红魔6Pro等." />
		<link rel="stylesheet" type="text/css" href="../css/shuanghe.css"/>
		<link rel="shortcut icon" href="//static.nubia.cn/images/favicon.ico" type="image/x-icon" />
	</head>
	<body>
		<div class="header11"></div>
		<div class="check">
			<span id="">
				<a href="#">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;红魔双核散热背夹
			</span>
		</div>
		<div class="sel"></div>
		<div class="banner11">
			<img src="https://oss.static.nubia.cn/active/604841e63b5a939.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e56f74785.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e6058ee97.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e65181231.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e8a310d91.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e8ef32073.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e49961685.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e11b93174.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e3c6dca23.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e49fa2586.jpg" >
			<img src="https://oss.static.nubia.cn/active/604841e2e49ab38.jpg" >
		</div>
		<div class="footer11"></div>
	</body>
</html>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
	$(".header11").load("header.html");
	$(".footer11").load("footer.html");
	function choose(){
		
	
	$('.small').on('click',function(){
		var x=$(this).index();
		if(x==0){
			$('.smallbox').css({
				"background-image": 'url(../img/shuanghe/60484061097a775.png)',
				"background-size":"100% 100%",
			})
			$(this).css('border','1px solid red')
		}else if(x==1){
			$('.smallbox').css({
				"background-image": 'url(../img/shuanghe/604840151990247.png)',
				"background-size":"100% 100%",
			})
			$(this).css('border','1px solid red')
		}else if(x==2){
			$('.smallbox').css({
				"background-image": 'url(../img/shuanghe/6048401519bf389.png)',
				"background-size":"100% 100%"
			})
			$(this).css('border','1px solid red')
		}else if(x==3){
			$('.smallbox').css({
				"background-image": 'url(../img/hongmo/159953058210.png)',
				"background-size":"100% 100%"
			})
			$(this).css('border','1px solid red')
		}
	})
	$('.left').css("float","left");
	$('.right').css("float","right");
	}
	
	function bigMitor(){
		
	
	//当鼠标划上小图，遮罩层和大图显示
	$(".smallbox").mouseover(function(){
		$(".mask").show();
		$(".bigbox").show();
		//当鼠标划出小图，遮罩层和大图隐藏
	}).mouseout(function(){
		$(".mask").hide();
		$(".bigbox").hide();
	}).mousemove(function(){
		// 一、首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）
		
	        // 获取鼠标当前位置
	        var pageX =event.pageX;//鼠标到文档头部距离
	        var pageY = event.pageY;//鼠标到文档左侧距离
	        
	        // 获取“小图”窗口在整个文档中的偏移位置
	        var offsetX = $('.smallbox').offset().left;//当前元素到左侧距离
	        var offsetY = $('.smallbox').offset().top;//当前元素到头部距离
	        // 计算鼠标在小图中的相对位置
	        var relativeX = pageX - offsetX;
	        var relativeY = pageY - offsetY;
	        
	        // 考虑到鼠标处于“放大镜”框的中心，我们要根据鼠标位置计算“放大镜”框的位置
	        var magOffsetX = $('.mask').width() / 2;//遮罩层宽的一半
	        var magOffsetY = $('.mask').height() / 2;//遮罩层高的一半
	                   
	        var left1 = relativeX - magOffsetX;
	        var top1 = relativeY - magOffsetY;
	        
	        $('.mask').css({
	        	left: left1 + 'px',
	            top: top1 + 'px' 
	        });
	                      
	      // 二、处理越界情况  
	        // 确定边界
	        var maxMagX = $('.smallbox').width() - $('.mask').width();
	        var maxMagY = $('.smallbox').height() - $('.mask').height();
	        // 左边界
	        if (left1 <= 0) {
	        	left1 = 0; 
	        	$('.mask').css('left', '0px'); }
	        // 右边界
	        if (left1 >= maxMagX) {
	        	left1 = maxMagX;
	        	$('.mask').css('left', maxMagX + 'px'); }
	        // 上边界
	        if (top1 <= 0) {
	        	top1 = 0; 
	        	$('.mask').css('top', '0px'); }
	        // 下边界
	        if (top1 >= maxMagY) {
	        	top1 = maxMagY; 
	        	$('.mask').css('top', maxMagY + 'px'); }
	                              
	        // 三、其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动   
	        // 按照之前确定的缩放比例移动“原图”窗口中的图片
	        // 图片的移动方向与鼠标的移动方向是相反的！
	        var maxMagX2 = $('.bigbox img').width()-$('.bigbox').width();
	        var maxMagY2 = $('.bigbox img').height()-$('.bigbox').height();
	                   
	        var left2 = left1/maxMagX *maxMagX2;
	        var top2 = top1/maxMagY *maxMagY2;  
	     	$('.bigbox img').css({ marginLeft: -left2 + 'px', marginTop: -top2 + 'px' });          
	
	});
	}
	
	function goodsInfo(){
		console.log("goodsId",location.search);
		let goodsId=location.search.split("?")[1];
		$.get("../php/getGoodsInfo.php?goodsId="+goodsId,function(str){
			let goods=JSON.parse(str);
			console.log(goods);
			let htmlStr=`
					<div class="sel-left">
						<div class="smallbox">
							<div class="mask"></div>
						</div>
						<div class="bigbox">
							<img src="${goods.goodsImg}" >
						</div>
						<ul>
							<li class="small"><img src="${goods.goodsImg}" ></li>
							<li class="small"><img src="../img/shuanghe/604840151990247.png" ></li>
							<li class="small"><img src="../img/shuanghe/6048401519bf389.png" ></li>
							<li class="small"><img src="../img/hongmo/159953058210.png" ></li>
						</ul>
						<div class="bot">
							<a href="#"><img src="../img/xiaohuangren/599556c697a0468.png" >分享</a>
							<a href="#"><img src="../img/xiaohuangren/599556c69769e28.png" >收藏</a>
						</div>
					</div>
					<div class="sel-right">
						<ul>
							<li>
								<p>
								<h3>${goods.goodsName}<br>￥${goods.goodsPrice}</h3>
								</p>
							</li>
							<hr >
							<li>
								<p>
									活&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;动				<span class="lspa">&nbsp;&nbsp;积&nbsp;&nbsp;分&nbsp;&nbsp;</span>
									购买即赠积分，积分可抵现 <br><br>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span class="lspa">&nbsp;&nbsp;包&nbsp;&nbsp;邮&nbsp;&nbsp;</span>
									青铜及以下满59、白银满39、黄金及以上包邮
								</p>
							</li>
							<hr >
							<li>
								地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址   陕西省&nbsp;&nbsp;&nbsp;西安市&nbsp;&nbsp;&nbsp;新城区 
								<a href="#"class="la11">修改</a><p class="lp11">现货</p>
							</li>
							<hr >
							<li>
								选择颜色
								<p class="lp">
								<button type="button">${goods.beiyong1}</button>
								<button type="button">${goods.beiyong2}</button>
								</p>
							</li>
							<li>
								<p>数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量</p>
								<p class="lnum">
								<button type="button">-</button>
								<span id="">1</span>
								<button type="button">+</button>
								</p>
							</li>
							<li>
								<p >
								<button type="button" class="lbtn" onclick=addShopping()>加入购物车</button>
								<button type="button" class="lbtn" id="lbtn2">立即购买</button>
								</p>
							</li>
						</ul>
					</div>
			`;
			$(".sel").html(htmlStr);
			bigMitor();
			 choose();
			 addShopping()
		})
		}
	$(function(){
		goodsInfo();
	})
	function addShopping(){
		
	
	function addShoppingCart(){
		$.get("../php/addShoppingCart.php?goodsId=0003&vipName=goodsName&goodsCount=40",function(data){
			alert("添加成功");
			setTimeout(()=>{
				location.href="gouwuche.html";
			},3000);
		})
		
	}
	 $(function(){
		addShoppingCart();
	})
	}
</script>